<template>
  <div class="watermark" :style="containerStyle">
    <div v-for="n in props.quantity" :key="`watermark-${n}`">{{ text }}</div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { useOauth } from '@/compositions/utils/oauth'

const props = defineProps({
  color: { type: String, default: '#FFFFFE' },
  fontSize: { type: String, default: '3' },
  angle: { type: String, default: '0' },
  quantity: { type: Number, default: 10 },
})

const { userId } = storeToRefs(useAccountStore())
const { oauthId } = useOauth()

const text = computed(() => {
  return userId.value ? `aff: ${userId.value}` : `oauthId: ${oauthId.value}`
})

const opacity = computed(() => {
  return import.meta.env.DEV ? '0.5' : '0.01'
})

const containerStyle = computed(() => ({
  color: props.color,
  opacity: `${opacity.value}`,
  transform: `rotate(-${props.angle}deg)`,
  fontSize: `${props.fontSize}rem`,
}))
</script>
<style scoped lang="scss">
.watermark {
  height: 100%;
  width: 100%;
  position: absolute;

  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 99;
  pointer-events: none;

  opacity: 1;
  font-size: 5rem;
  color: #ffffff;
  text-align: center;

  display: flex;
  flex-direction: column;
}
</style>
